<template>
  <div class="rigister-container">
    <div class="rigister-container-main">
      <form action="#">
        <input type="text" class="phone-ipt" placeholder="请输入手机号" v-model="phoneNumber"><br>
        <input type="text" class="username-ipt" placeholder="请输入昵称" v-model="username"><br>
        <input type="password" class="pwd-ipt" placeholder="请输入密码" v-model="password"><br>
        <input type="text" class="short-msg" placeholder="请输入验证码" v-model="shortMsg">
        <button v-if="ToggleshortMsgBtn" class="getMsg-btn" @click.prevent="getShortMsg">获取验证码</button>
        <button v-else class="getMsg-btn" disabled>{{countDown}}{{disabledBtnMsg}}</button>
        <button class="rigister-btn" @click.prevent="register">注册</button>
      </form>
    </div>
    <footer class="rigister-login-bottom">
      <a href="javascript:;" class="go-other-login" @click="goOtherLogin">&lt;&nbsp;其他登录方式</a>
    </footer>
  </div>
</template>

<script>
import { getShortMsgApi, JiaoYanShortMsgApi, RegisterApi } from '@/requset/api'
export default {
  data() {
    return {
      username: 'tx6733495', // 昵称
      password: '5201314', // 密码
      phoneNumber: '18791706142', // 手机号
      shortMsg: '6121', // 验证码
      ToggleshortMsgBtn: true, // 控制倒计时按钮和发送验证码按钮的显示与隐藏
      disabledBtnMsg: 's后重新发送',
      second: 60,
      reg: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/ // 手机号正则
    }
  },
  watch: {
    // 监听 秒数
    second(newNum) {
      // 到 0 秒时
      if (newNum === 0) {
        this.second = 60
        // 展示 获取验证码 按钮
        this.ToggleshortMsgBtn = true
      }
    }
  },
  computed: {
    countDown() {
      return this.second
    }
  },
  methods: {
    // 展示其他登录方式组件
    goOtherLogin() {
      this.$store.commit('goQrLogin')
    },
    // 获取验证码
    getShortMsg() {
      // 判断手机号格式
      if (this.reg.test(this.phoneNumber)) {
        // 发送请求 获取验证码
        getShortMsgApi(this.phoneNumber).then(({ data: res }) => {})
      } else if (this.phoneNumber == '') {
        this.$store.commit('OpenTitle', '手机号不能为空，请填写手机号！')
        this.$store.dispatch('closeTitle')
        return
      } else {
        this.$store.commit('OpenTitle', '请输入正确的手机号！')
        this.$store.dispatch('closeTitle')
        return
      }
      // 定时器 控制 倒计时
      setInterval(() => {
        this.second--
      }, 1000)
      // 展示 倒计时按钮
      this.ToggleshortMsgBtn = false
    },
    // 注册
    register() {
      // 正则 验证手机号
      if (this.reg.test(this.phoneNumber)) {
        // 校验验证码
        JiaoYanShortMsgApi({ phone: this.phoneNumber, captcha: this.shortMsg })
          .then(({ data: res }) => {
            console.log('检验成功，验证码正确')
            // 调用注册接口
            return RegisterApi({ phone: this.phoneNumber, captcha: this.shortMsg, password: this.password, nickname: this.username })
          })
          .then(({ data: res }) => {
            console.log(res)
            this.$store.commit('OpenTitle', '注册成功！')
            this.$store.dispatch('closeTitle')
            this.$store.commit('goPwdLogin')
          })
          .catch(err => {
            this.$store.commit('OpenTitle', '验证码错误，请重新输入验证码！')
            this.$store.dispatch('closeTitle')
          })
      } else {
        // 手机号不正确 提示用户
        this.$store.commit('OpenTitle', '请您输入正确手机号！')
        this.$store.dispatch('closeTitle')
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../assets/base.less';
.rigister-container {
  align-content: space-between;
  height: 315px;
}
.rigister-container-main {
  width: 100%;
  height: 250px;
  text-align: center;
  border-bottom: 1px solid #ccc;
  padding-bottom: 3px;
  padding-top: 10px;
  form {
    display: inline-block;
    text-align: left;
    padding: 10px 0;
    input {
      height: 26px;
      outline: none;
      border: 1px solid #cdcdcd;
      border-radius: 3px;
      font-size: 12px;
      text-indent: 0.5em;
      margin-bottom: 15px;
    }
    .phone-ipt {
      width: 200px;
    }
    .short-msg {
      width: 100px;
    }
    .pwd-ipt {
      width: 200px;
    }
    .username-ipt {
      width: 200px;
    }
    .getMsg-btn {
      border: 1px solid #ccc;
      height: 29px;
      margin-left: 6px;
      border-radius: 3px;
      font-size: 12px;
      cursor: pointer;
      width: 94px;
    }
    .rigister-btn {
      display: block;
      width: 206px;
      height: 30px;
      background-color: #3b8ad4;
      border: 1px solid #3984ce;
      border-radius: 5px;
      margin-top: 5px;
      color: #fff;
      cursor: pointer;
    }
  }
}
.rigister-login-bottom {
  font-size: 12px;
  padding: 0 20px;
  a {
    line-height: 50px;
    text-decoration: none;
  }
  .go-other-login {
    color: #0c72c3;
  }
}
</style>